<template>
  <div class="dashboard-editor-container">
    <div class="head_color">
      <div class="head_center">
        <div class="head_title" style="float: left;cursor: pointer;" @click="toFYLZ">
          {{sysName}}
        </div>
        <div style="float: right;">
          <el-menu :default-active="activeIndex"
                   router
                   class="el-menu-demo" mode="horizontal"
                   background-color="#006BB7"
                   text-color="#EAF2ED"
                   active-text-color="#ffd04b">
            <el-menu-item index="/planeFace">平面图</el-menu-item>
            <el-menu-item index="/monitorVideo">监控一览</el-menu-item>
            <el-menu-item index="/monitorVideoGz">关注监控</el-menu-item>
            <el-menu-item index="/frontEndIndex">设备列表</el-menu-item>
            <el-menu-item @click="toGFBC">共富班车</el-menu-item>
            <el-menu-item index="/relFace">发布界面</el-menu-item>
            <el-menu-item index="/index">后台管理</el-menu-item>
            <el-menu-item >
              <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
                <div style="color: #EAF2ED;">
                  系统管理员
                  <i class="el-icon-caret-bottom" style="color: #EAF2ED;" />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided >
                    <span><a href="WebComponentsKit.exe" target="_blank" download="WebComponentsKit.exe">视频组件</a></span>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>

          </el-menu>
        </div>
      </div>
    </div>

    <div style="width: 1920px;margin-left: auto;margin-right: auto;">
      <div>
<!--          <iframe ref="iframe" src="/videoShow" style="width: 718px;height: 500px;" frameborder="0"></iframe>-->
          <videoShow></videoShow>
      </div>
    </div>

  </div>
</template>

<script>
  import videoShow from "./videoShow";
  const defaultSettings = require('@/settings.js');

export default {
  name: "MonitorVideo",
  components: {
    videoShow
  },
  data() {
    return {
      flag:true,
      sysName: defaultSettings.title,
      activeIndex: '/monitorVideoGz',
      iframe0:null,
    };
  },
  created() {
    this.$nextTick(() => {
      this.iframe0 = this.$refs.iframe
    });
  },
  mounted: function () {

  },
  beforeDestroy(){
    this.flag = false
  },
  destroyed: function () {
    this.flag = false
    // this.$refs.iframe.contentWindow.destroyedPage()
  },
  computed: {

  },
  methods: {
    toFYLZ(){
      window.open('https://fylz.zjagri.cn/ppthtml/index.html','_blank')
    },
    toGFBC(){
      window.open('https://www.danss.work/lszx/','_blank')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    },

  }

}
</script>
<style rel="stylesheet/scss" lang="scss">
  .active{
    color: red;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top:0vh !important;
  }
</style>
<style scoped>
  .plugin {
    width: 800px;
    height: 600px;
  }

  .my-tag {
    margin-left: 3px;
  }

  .my-group-btn {
    margin-top: 5px;
  }

</style>
<style scoped lang="scss">
  ::v-deep{
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
</style>
